<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid 布局完全指南 - 我的个人博客</title>
    <style>
        /* 初始加载样式 */
        body {
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .page-loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-color, #fff);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }
    </style>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/article.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css">
</head>
<body>
    <div class="page-loading">
        <div class="loading-spinner"></div>
    </div>

    <header>
        <nav class="main-nav">
            <div class="logo">
                <h1><a href="index.html">我的博客</a></h1>
            </div>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="frontend.html" class="nav-link">技术分享</a>
                    <ul class="submenu">
                        <li><a href="frontend.html">前端开发</a></li>
                        <li><a href="backend.html">后端开发</a></li>
                        <li><a href="tools.html">开发工具</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a href="travel.html" class="nav-link">生活随笔</a>
                    <ul class="submenu">
                        <li><a href="travel.html">旅行日记</a></li>
                        <li><a href="food.html">美食推荐</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a href="profile.html" class="nav-link">关于我</a>
                    <ul class="submenu">
                        <li><a href="profile.html">个人简介</a></li>
                        <li><a href="contact.html">联系方式</a></li>
                    </ul>
                </li>
            </ul>
            <div class="nav-actions">
                <a href="publish.html" class="publish-btn-nav">发布文章</a>
                <button id="theme-toggle" class="theme-toggle">
                    <span class="light-icon">☀️</span>
                    <span class="dark-icon">🌙</span>
                </button>
            </div>
        </nav>
    </header>

    <main>
        <article class="article-container">
            <div class="article-header">
                <h1 class="article-title">CSS Grid 布局完全指南</h1>
                <div class="article-meta">
                    <div class="meta-item">
                        <i class="icon-calendar"></i>
                        <span>2024-01-15</span>
                    </div>
                    <div class="meta-item">
                        <i class="icon-eye"></i>
                        <span>1,234 阅读</span>
                    </div>
                    <div class="meta-item">
                        <i class="icon-comment"></i>
                        <span>23 评论</span>
                    </div>
                </div>
                <div class="article-tags">
                    <a href="#" class="tag">CSS</a>
                    <a href="#" class="tag">Grid</a>
                    <a href="#" class="tag">布局</a>
                    <a href="#" class="tag">前端开发</a>
                </div>
            </div>

            <div class="article-content">
                <div class="article-toc">
                    <h3>目录</h3>
                    <ul>
                        <li><a href="#introduction">1. 引言</a></li>
                        <li><a href="#basic-concepts">2. 基础概念</a></li>
                        <li><a href="#grid-container">3. 网格容器</a></li>
                        <li><a href="#grid-items">4. 网格项目</a></li>
                        <li><a href="#responsive">5. 响应式布局</a></li>
                        <li><a href="#best-practices">6. 最佳实践</a></li>
                    </ul>
                </div>

                <section id="introduction">
                    <h2>1. 引言</h2>
                    <p>CSS Grid 布局是一个强大的二维布局系统，它彻底改变了我们设计网页布局的方式。本文将详细介绍 Grid 布局的核心概念和使用方法。</p>
                </section>

                <section id="basic-concepts">
                    <h2>2. 基础概念</h2>
                    <p>在开始使用 Grid 布局之前，我们需要了解一些基本概念：</p>
                    <ul>
                        <li>网格容器（Grid Container）</li>
                        <li>网格项目（Grid Items）</li>
                        <li>网格线（Grid Lines）</li>
                        <li>网格轨道（Grid Tracks）</li>
                    </ul>
                </section>

                <section id="grid-container">
                    <h2>3. 网格容器</h2>
                    <p>要创建网格布局，首先需要设置容器：</p>
                    <pre><code class="language-css">.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 20px;
}</code></pre>
                </section>

                <section id="grid-items">
                    <h2>4. 网格项目</h2>
                    <p>网格项目可以设置位置和跨度：</p>
                    <pre><code class="language-css">.item {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
}</code></pre>
                </section>

                <section id="responsive">
                    <h2>5. 响应式布局</h2>
                    <p>Grid 布局天生支持响应式设计：</p>
                    <pre><code class="language-css">@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
    }
}</code></pre>
                </section>

                <section id="best-practices">
                    <h2>6. 最佳实践</h2>
                    <p>以下是使用 Grid 布局的一些最佳实践：</p>
                    <ul>
                        <li>使用命名网格线增加可读性</li>
                        <li>合理使用 auto-fit 和 minmax()</li>
                        <li>避免过度嵌套网格</li>
                        <li>考虑回退方案</li>
                    </ul>
                </section>
            </div>

            <div class="article-footer">
                <div class="article-author">
                    <img src="assets/images/avatar.jpg" alt="作者头像" class="author-avatar">
                    <div class="author-info">
                        <h3>作者：张三</h3>
                        <p>前端开发工程师，热爱分享技术知识和经验。</p>
                    </div>
                </div>

                <div class="article-share">
                    <h3>分享文章</h3>
                    <div class="share-buttons">
                        <button class="share-btn wechat">
                            <i class="icon-wechat"></i>
                            微信
                        </button>
                        <button class="share-btn weibo">
                            <i class="icon-weibo"></i>
                            微博
                        </button>
                        <button class="share-btn qq">
                            <i class="icon-qq"></i>
                            QQ
                        </button>
                    </div>
                </div>
            </div>
        </article>

        <div class="article-comments">
            <h3>评论区</h3>
            <div class="comment-form">
                <textarea placeholder="写下你的评论..."></textarea>
                <button type="submit">发表评论</button>
            </div>

            <div class="comment-list">
                <div class="comment-item">
                    <img src="assets/images/user1.jpg" alt="用户头像" class="comment-avatar">
                    <div class="comment-content">
                        <div class="comment-header">
                            <span class="comment-author">李四</span>
                            <span class="comment-date">2024-01-16</span>
                        </div>
                        <p class="comment-text">写得很详细，对我理解Grid布局很有帮助！</p>
                        <div class="comment-actions">
                            <button class="reply-btn">回复</button>
                            <button class="like-btn">
                                <i class="icon-like"></i>
                                <span>12</span>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="comment-item">
                    <img src="assets/images/user2.jpg" alt="用户头像" class="comment-avatar">
                    <div class="comment-content">
                        <div class="comment-header">
                            <span class="comment-author">王五</span>
                            <span class="comment-date">2024-01-15</span>
                        </div>
                        <p class="comment-text">最佳实践部分说得很好，学到了很多！</p>
                        <div class="comment-actions">
                            <button class="reply-btn">回复</button>
                            <button class="like-btn">
                                <i class="icon-like"></i>
                                <span>8</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <aside class="article-sidebar">
            <div class="widget related-articles">
                <h3>相关文章</h3>
                <ul>
                    <li>
                        <a href="#">Flexbox 与 Grid 的完美配合</a>
                        <span class="view-count">789 阅读</span>
                    </li>
                    <li>
                        <a href="#">CSS Grid 实现常见布局</a>
                        <span class="view-count">567 阅读</span>
                    </li>
                    <li>
                        <a href="#">响应式布局最佳实践</a>
                        <span class="view-count">456 阅读</span>
                    </li>
                </ul>
            </div>

            <div class="widget hot-tags">
                <h3>热门标签</h3>
                <div class="tag-cloud">
                    <a href="#" class="tag">HTML5</a>
                    <a href="#" class="tag">CSS3</a>
                    <a href="#" class="tag">JavaScript</a>
                    <a href="#" class="tag">响应式</a>
                    <a href="#" class="tag">布局</a>
                </div>
            </div>
        </aside>
    </main>

    <footer>
        <p>&copy; 2024 我的个人博客. All rights reserved.</p>
    </footer>

    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
    <script src="assets/js/article.js"></script>
</body>
</html> 